<style>
.item img{
	height:387px !important;
	width:580px;
}

.carousel-indicators li{
	background:gray;
}

.carousel-indicators li.active{
	background:transparent;
	background-color:transparent;
	border: 1px solid blue;
}
</style>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	<li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox" style="color:black;"> 
    <div class="item active">
      <img src="images/runwithtechnology.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Run with Technology</h3>
		<p>Run with Technology</p>

      </div>
    </div>
    <div class="item">
      <img src="images/background.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Application</h3>
		<p>Our App</p>

      </div>
    </div>
    <div class="item">
      <img src="images/tracksuccess.jpg" alt="...">
      <div class="carousel-caption">
        <h3>Track Success</h3>
		<p>Track Success</p>
      </div>
    </div>
	
	<div class="item">
      <img src="images/eye.png" alt="...">
      <div class="carousel-caption">
        <h3>Keep An EYE</h3>
		<p>View your child's progress</p>
      </div>
    </div>
  </div>

  
</div>